<template>
  <div>
    <div>
      <div style="float: left">
        <i-select v-model="type" style="width:200px">
          <i-option v-for="item in typeList" :value="item.value" :key="item">{{
            item.label
          }}</i-option>
        </i-select>
      </div>

      <div style="float: left">
        <i-input
          v-model="searchValue"
          placeholder="请输入..."
          style="width: 300px;margin-left: 20px"
        ></i-input>
      </div>

      <div>
        <Dropdown
          placement="bottom-start"
          :transfer="true"
          trigger="click"
          style="margin-left: 20px;"
          @on-click="onMenuSelect"
        >
          <a href="javascript:void(0)">
            <i-button type="success">新增数据集</i-button>
          </a>
          <Dropdown-menu slot="list">
            <Dropdown-item
              name="sqlInfo"
              class="rightFontSize"
              @on-click="onMenuSelect"
              >SQL数据集</Dropdown-item
            >
            <Dropdown-item
              name="apiInfo"
              class="rightFontSize"
              @on-click="onMenuSelect"
              >API数据集</Dropdown-item
            >
            <Dropdown-item
              name="jsonInfo"
              class="rightFontSize"
              @on-click="onMenuSelect"
              >JSON数据集</Dropdown-item
            >
          </Dropdown-menu>
        </Dropdown>
      </div>
    </div>
    <div style="margin-top: 20px">
      <i-table
        stripe
        :columns="listData.columns"
        :data="listData.list"
      ></i-table>
    </div>

    <div class="page">
      <Page
        :total="listData.page.total"
        show-total
        show-elevator
        :page-size="listData.page.size"
        show-sizer
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
        size="small"
      >
      </Page>
    </div>

    <!-- 数据源设置 -->
    <Source ref="dataSource" save-method="save" @save="saveDataWare"></Source>
    <!-- javabean设置 -->
    <Javabean ref="javabean"></Javabean>
  </div>
</template>
<script>
import Source from "../components/data_source_setting.vue";
import Javabean from "../components/javabean_setting.vue";
export default {
  name: "listView",
  data() {
    return {
      listData: {
        list: [],
        columns: [
          {
            title: "数据集编号",
            key: "dbCode",
            width: 200
          },
          {
            title: "数据集名称",
            key: "dbChName",
            width: 200
          },
          {
            title: "sql",
            key: "dbDynSql"
          },
          {
            title: "Api",
            key: "apiUrl"
          },
          {
            title: "JSON",
            key: "jsonData"
          }
        ],
        page: {
          //分页参数
          page: 1,
          size: 10,
          total: 0
        }
      },
      typeList: [
        {
          value: "sql",
          label: "SQL数据集"
        },
        {
          value: "api",
          label: "API数据集"
        },
        {
          value: "json",
          label: "JSON数据集"
        }
      ],
      type: "",
      searchValue: ""
    };
  },
  components: {
    Source,
    Javabean
  },
  methods: {
    onMenuSelect: function(name) {
      if (name == "javabean") {
        this.$refs.javabean.javabeanShow();
      } else {
        this.$refs.dataSource.onMenuSelect(name);
      }
    },
    cancelback: function(id) {},
    saveDataWare: function(reportData) {
      //debugger
      this.$http.post({
        url: this.api.saveWareHouse,
        contentType: "json",
        data: JSON.stringify(reportData),
        timeout: 10000,
        success: result => {
          console.log("saveWareHouse====>result", result);
          this.$refs.dataSource.close();
        },
        fail: res => {
          this.$refs.dataSource.closeError();
        },
        error: () => {
          this.$refs.dataSource.closeError();
        }
      });
    },
    loadData() {
      //加载数据列表
      let that = this;
      let data = {};
      data.pageNo = that.listData.page.page;
      data.pageSize = that.listData.page.size;
      if (this.searchValue != null) {
        data.isSearch = 1;
        data.dbCode = this.searchValue;
        data.dbChName = this.searchValue;
      }

      this.$http.get({
        url: this.api.wareHouseList,
        data: data,
        success: res => {
          that.listData.list = res.records;
          that.listData.page.size = res.size;
          that.listData.page.total = res.total;
        }
      });
    },
    handleSizeChange(val) {
      this.listData.page.size = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.listData.page.page = val;
      this.loadData();
    }
  },
  created: function() {
    this.loadData();
  }
};
</script>
